<!DOCTYPE html>
<html>
<head th:include="_header_include::frag(~{::title},~{::style},~{})">
    <title>页面自定义字段</title>
    <style>
        .overflowBreak .el-form-item__content{word-wrap: break-word;word-break: break-all;white-space: pre-wrap !important;line-height: 1.5;margin-top: 10px;}  
    </style>
</head>
<body>
<div id="userManage" class="userManage mainPadding" style="display:none">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>页面自定义字段</el-breadcrumb-item>
        <el-breadcrumb-item>页面字段设置</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="marginB20">
        <el-col :span="18">
            <shiro:hasPermission name="customfield:addField">
                <el-button type="primary" @click="addFieldSetting"><i class="el-icon-plus"></i>添加</el-button>
            </shiro:hasPermission>
             <shiro:hasPermission name="customfield:imField">
            <el-button type="warning" @click="dialogBatchVisible = true"><i class="el-icon-plus"></i>批量添加</el-button>
            </shiro:hasPermission>
             <shiro:hasPermission name="customfield:editField">
            <el-button type="success"  @click="modifyFiled"><i class="el-icon-edit"></i>编辑</el-button>
            </shiro:hasPermission>
             <shiro:hasPermission name="customfield:delField">
            <el-button type="danger" @click="deleteFun"><i class="el-icon-delete"></i>删除</el-button>
            </shiro:hasPermission>
        </el-col>
        <el-col :span="6">
            <el-input placeholder="请输入字段名称" class="input-with-select" v-model="inputFieldName">
            <el-button slot="append" icon="el-icon-search" @click="getQuery">搜索</el-button>
            </el-input>
        </el-col>
    </el-row>
    <el-row  class="mainSearchBg">
        <el-table 
            ref="multipleTable"
            tooltip-effect="dark"
            style="width: 100%"
            border
             @selection-change="handleSelectionChange"
            :data="dataTable" 
            >
            <el-table-column align="center" type="selection" width="55"></el-table-column>
            <el-table-column align="center" prop="sortNum" label="序号"></el-table-column>
            <el-table-column align="center" prop="fieldCode" label="字段编码"></el-table-column>
            <el-table-column align="center" prop="fieldName" label="字段名称"></el-table-column>
            <el-table-column align="center" prop="displayName" label="外显名称"></el-table-column>
            <el-table-column align="center" prop="fieldType" label="字段类型" :formatter="getFieldTypeText"></el-table-column>
            <el-table-column align="center" prop="width" label="宽度"></el-table-column>
            <el-table-column align="center" prop="isUsed" label="是否使用" :formatter="getIsUsed"></el-table-column>
        </el-table>
        <table-pagination :pager="pager" @change="getQuery"></table-pagination>
    </el-row>
    <!-- dialog -->
    <el-dialog :title="addAndUpdateDialog" :visible.sync="dialogFormVisible" @close="closeAddDialog">
        <el-form :model="form" ref="fieldForm" :rules="rules">
            <div class="marginB20 fs16" style="margin-top:-10px;"><em class="redcolor">*</em>必填项</div>
            <div class="borderbox paddingL20 paddingR20 paddingT10">
                <el-row>
                    <el-col :span="12" style="position: relative;">
                        <span style="color: #f56c6c;position: absolute;top: 12px;    left: 8px;">*</span>
                        <el-form-item label="菜单代码：" :label-width="formLabelWidth" class="overflowBreak">{{fieldMenu.menuCode}}</el-form-item>
                    </el-col>
                    <el-col :span="12" style="position: relative;">
                        <span style="color: #f56c6c;position: absolute;top: 12px;    left: 8px;">*</span>
                        <el-form-item label="菜单名称：" :label-width="formLabelWidth">
                             {{fieldMenu.menuName}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="字段编码：" :label-width="formLabelWidth" prop="fieldCode">
                            <el-input v-model="form.fieldCode" autocomplete="off"  maxlength="50"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="字段名称：" :label-width="formLabelWidth" prop="fieldName">
                            <el-input v-model="form.fieldName" autocomplete="off"  maxlength="50"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="外显名称：" :label-width="formLabelWidth" prop="displayName">
                            <el-input v-model="form.displayName" autocomplete="off"  maxlength="50"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="字段类型：" :label-width="formLabelWidth" prop="fieldType">
                            <el-select v-model="form.fieldType" placeholder="请选择" value-key="value" style="width:100%;">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="marginB20 fs16 paddingT20">选填项</div>
            <div class="borderbox padding20">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="序号：" :label-width="formLabelWidth" prop="sortNum">
                            <el-input v-model="form.sortNum" autocomplete="off"  maxlength="5"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="宽度：" :label-width="formLabelWidth" prop="width">
                            <el-input v-model="form.width" autocomplete="off"  maxlength="4"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="Bean名：" :label-width="formLabelWidth">
                            {{fieldMenu.beanName}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否使用：" :label-width="formLabelWidth" prop="isUsed">
                            <el-select v-model="form.isUsed" placeholder="请选择" style="width:100%;">
                                <el-option
                                    v-for="item in isUsedOps"
                                    :key="item.value" 
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="备注：" :label-width="formLabelWidth" prop="remark">
                            <el-input v-model="form.remark" autocomplete="off" maxlength="500"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;">            
            <el-button type="primary" @click="saveField('fieldForm')" ref="submitBtn" :disabled="submitBrnDisabled">提交</el-button>
            <el-button @click="cancelForm('fieldForm')">取 消</el-button>
        </div>
    </el-dialog>
    
    
     <!-- 批量添加 自定义字段弹窗 start -->
            <el-dialog title="批量添加" :visible.sync="dialogBatchVisible" @close="closeUploadFileDialog">
               <el-row class="marginB20">
                                 <!-- 下载批量上传模版: <a href="" download="页面自定义字段导入模板">页面自定义字段模板</a> -->
                                 下载批量上传模版：<a href="/excel-templates/custom-field-template.xlsx" download="页面自定义字段导入模板"><span style="color:#409EFF">页面自定义字段模板</span></a>
               
               </el-row>
               <el-row>
                  <el-upload
                      class="upload-demo"
                      ref="upload"
                      :multiple="false"
                      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                      action="/customfield/customField/uploadCustomField"
                      :file-list="fileList"
                      :on-change="handleChange"
                      :before-upload="beforeUpload"
                      :on-success="uploadSuccess"
                     :on-error="uploadError"
                      :data="paramData"
                      :auto-upload="false">
                      <el-button slot="trigger" size="small" type="primary" style="margin-right: 10px;">上传文件</el-button>
                      <span slot="tip" class="el-upload__tip">只能上传xlsx文件</span>
                    </el-upload>
               
               
               </el-row>
              <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="submitUpload">确 定</el-button>
                <el-button @click="dialogBatchVisible = false">取 消</el-button>
              </div>
            </el-dialog>
      
            <!-- 批量添加 自定义字段弹窗 end -->
</div>
</body>
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">
    var fieldMenu=[[${fieldMenu}]];//当前字段所属的菜单组
</script>

<script th:src="@{/js/custom/customfield/fieldsetting.js?v=1.0.0}"></script>
</html>